<template>
  <div>
    <cement-search
      v-if="search.length"
      :searchData="search"
      @submitSearchModel="submitSearchModel">
    </cement-search>
    <cement-table
      v-if="title.length"
      :tableTitle="title"
      :expandTableTitle="expandTitle"
      @getData="getData"
      @deleteRow="deleteRow">
    </cement-table>
    <cement-update
      :allFiled="getAllFiled"
      @submitUpdate="submitUpdate"
      style="margin-top: 30px">
    </cement-update>
  </div>
</template>

<script>
import cementSearch from '@/components/cement-search'
import cementTable from '@/components/cement-table'
import cementUpdate from '@/components/cement-update'
import {getDictChild} from '@/api/module/borehole'
import {get} from 'lodash'
import {mapGetters, mapMutations} from 'vuex'

export default {
  name: 'cement-content',
  props: {
    title: {
      type: Array,
      default: function () {
        return []
      }
    },
    expandTitle: {
      type: Array,
      default: function () {
        return []
      }
    },
    search: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  components: {
    cementSearch,
    cementTable,
    cementUpdate
  },
  mounted () {
    this.intiComponentData()
    this.initAllDictData()
    this.getData()
  },
  methods: {
    ...mapMutations([
      'intiComponentData'
    ]),
    initAllDictData () {
      this.search.forEach(data => {
        this.initDictData(data)
      })
      this.getAllFiled.forEach((data) => {
        this.initDictData(data)
      })
    },
    initDictData (data) {
      if (!get(data, 'api') && get(data, 'type') && get(data, 'type') === 'select') {
        getDictChild(data.label).then(res => {
          data.select = get(res, 'data.data', [])
        })
      }
    },
    submitUpdate () {
      this.$emit('submitUpdate')
    },
    submitSearchModel () {
      this.$emit('submitSearchModel')
    },
    getData () {
      this.$emit('getData')
    },
    deleteRow (row) {
      this.$emit('deleteRow', row)
    }
  },
  computed: {
    ...mapGetters([
      'pageSizeGetters'
    ]),
    getAllFiled: function () {
      return this.title.concat(this.expandTitle)
    }
  }
}
</script>
